<!--
 * Tencent is pleased to support the open source community by making 蓝鲸 available.
 * Copyright (C) 2017 Tencent. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 * http://opensource.org/licenses/MIT
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
-->

<template>
  <div class="service-category">
    <span class="title">{{$t('服务分类')}}</span>
    <div class="selector-item mt10 clearfix">
      <bk-select class="category-selector fl"
        :clearable="false"
        :searchable="true"
        v-model="parent"
        @change="handleParentChange">
        <bk-option v-for="category in parentList"
          :key="category.id"
          :id="category.id"
          :name="category.name">
        </bk-option>
      </bk-select>
      <bk-select class="category-selector fl"
        :clearable="false"
        :searchable="true"
        v-model="child"
        v-validate="'required'"
        name="secondCategory">
        <bk-option v-for="category in childList"
          :key="category.id"
          :id="category.id"
          :name="category.name">
        </bk-option>
      </bk-select>
      <span class="second-category-errors" v-if="errors.has('secondCategory')">{{errors.first('secondCategory')}}</span>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'form-service-category',
    props: {
      instance: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        parent: '',
        child: '',
        list: []
      }
    },
    computed: {
      ...mapGetters('objectBiz', ['bizId']),
      parentList() {
        return this.list.filter(category => !category.bk_parent_id)
      },
      childList() {
        return this.list.filter(category => category.bk_parent_id === this.parent)
      }
    },
    watch: {
      child(child) {
        this.$emit('change', child)
      }
    },
    async created() {
      await this.getList()
      this.setupValue()
    },
    methods: {
      async getList() {
        try {
          const { info = [] } = await this.$store.dispatch('serviceClassification/searchServiceCategoryWithoutAmout', {
            params: { bk_biz_id: this.bizId }
          })
          this.list = info
        } catch (error) {
          console.error(error)
        }
      },
      setupValue() {
        const {
          bk_parent_id: parent = '',
          id: child = ''
        } = this.list.find(category => category.id === this.instance.service_category_id) || {}
        this.parent = parent
        this.child = child
      },
      handleParentChange() {
        const [firstChild] = this.childList
        this.child = firstChild ? firstChild.id : ''
      }
    }
  }
</script>

<style lang="scss" scoped>
.service-category {
    font-size: 12px;
    padding: 20px 0 24px 36px;
    margin: 0 20px;
    border-bottom: 1px solid #dcdee5;
    .selector-item {
        position: relative;
        width: 50%;
        max-width: 554px;
        padding-right: 54px;
    }
    .category-selector {
        width: calc(50% - 5px);
        & + .category-selector {
            margin-left: 10px;
        }
    }
    .second-category-errors {
        position: absolute;
        top: 100%;
        left: 0;
        margin-left: calc(50% - 18px);
        line-height: 14px;
        font-size: 12px;
        color: #ff5656;
        max-width: 100%;
        @include ellipsis;
    }
}
</style>
